/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <Form :label-width="60" inline style="margin-bottom:10px">
        <FormItem label="姓名">
          <Input
            type="text"
            clearable
            v-model="formSearch.name"
            style="width: 180px"
            placeholder="请输入用户姓名"
          />
        </FormItem>
        <FormItem label="电话">
          <Input
            type="text"
            clearable
            v-model="formSearch.mobile"
            style="width: 180px"
            placeholder="请输入用户联系方式"
          />
        </FormItem>
        <FormItem label="状态">
          <Select clearable v-model="formSearch.state" style="width:180px">
            <Option value>全部</Option>
            <Option value="VALID">正常</Option>
            <Option value="DISABLE">禁用</Option>
          </Select>
        </FormItem>
        <Button type="primary" @click="handleSearch()">查询</Button>
        <Button type="success" @click="lookALL()">查看全部</Button>
      </Form>
      <!-- 表格 -->
      <tables
        ref="tables"
        :columns="columns"
        search-place="top"
        :searchBtn="false"
        v-model="tableData"
        :page="page"
        :handleChange="handleChange"
      />
    </Card>
    <Modal :mask-closable='false' v-model="showModel" title="添加爱豆" width="300" @on-visible-change="changeModel">
      <Form ref="formSubmitRef" :model="formSubmitData" :rules="formSubmitRule" class="model-wrap" label-position="left" :label-width="120">
        <h3>用户信息</h3>
        <div style="margin-left:20px;">
          <FormItem label="用户ID">{{curRowData&&curRowData.id}}</FormItem>
          <FormItem label="姓   名">{{curRowData&&curRowData.nickname}}</FormItem>
          <FormItem label="联系方式">{{curRowData&&curRowData.mobile}}</FormItem>
        </div>
        <h3>爱豆信息</h3>
        <div style="margin-left:20px;">
          <FormItem label="爱豆余额">{{curRowData&&curRowData.idouBalance}}</FormItem>
        </div>
        <h3>添加数量</h3>
        <FormItem label :label-width="20">
            <Input placeholder="请输入数量" v-model="formSubmitData.number" />
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel=false">取消</Button>
        <Button type="primary" @click="sureModel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  name: "userList",
  components: {
    Tables
  },
  data() {
    return {
      showModel: false,
      curRowData:null,
      page: {},
      tableData: [],
      formSubmitRule: {
        money: [
          {
            required: true,
            pattern: /^[1-9]*$/,
            message: "请输入大于0的整数",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        number: ""
      },
      formSearch: {
        name: "",
        mobile: "",
        state: ""
      },
      columns: [
        {
          title: "用户ID",
          key: "id",
          minWidth: 100,
          align: "center"
        },
        {
          title: "姓名",
          align: "center",
          key: "nickname",
          minWidth: 100
        },
        {
          title: "联系方式",
          align: "center",
          key: "mobile",
          minWidth: 100
        },
        {
          title: "预约次数",
          align: "center",
          key: "serviceCount",
          minWidth: 100
        },
        {
          title: "订单数量",
          align: "center",
          key: "orderCount",
          minWidth: 100
        },
        {
          title: "爱豆余额",
          align: "center",
          key: "idouBalance",
          minWidth: 100
        },
        {
          title: "状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              params.row.state == "VALID"
                ? "启用"
                : params.row.state == "DISABLE"
                ? "禁用"
                : ""
            );
          }
        },
        {
          title: " ",
          align: "center",
          key: ""
        },
        {
          title: "操作",
          align: "center",
          width: 160,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            let text = params.row.state == "VALID" ? "禁用" : "启用";
            return h("div", [
              h(
                "Button",
                {
                  attrs: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      let dataObj = {
                        id:params.row.id,
                        state:params.row.state=='VALID'?'DISABLE':'VALID'
                      }
                      requestData("/admin/user/updateState", "post", dataObj).then(res => {
                        if (res.data.code == 0) {
                          this.$Message.success('操作成功');
                          this.getListData();
                        } else {
                          this.$Message.error(res.data.msg);
                        }
                      });
                    }
                  }
                },
                text
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "success",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showModel = true;
                      this.curRowData = params.row;
                    }
                  }
                },
                "添加爱豆"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    //model确定
    sureModel() {},
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.curRowData = null;
      }
    },
    lookALL() {
      let formSearch = this.formSearch;
      for (let i in formSearch) {
        formSearch[i] = "";
      }
      this.formSearch = formSearch;
      this.indexPage = 1;
      this.getListData();
    },
    handleSearch() {
      this.indexPage = 1;
      this.getListData();
    },
    //获取分页
    handleChange(e) {
      this.indexPage = e;
      this.getListData();
    },
    getListData() {
      const dataObj = Object.assign(
        {
          page: this.indexPage,
          max: 10
        },
        this.formSearch
      );
      requestData("/admin/user", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          const { pageNumber, totalPage, totalRow } = res.data.page;
          this.page = {
            pageNumber: pageNumber,
            totalPage,
            totalRow: totalRow
          };
          this.tableData = res.data.data || [];
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getListData();
  }
};
</script>
